<template>
  <div class="gap-base" :style="styleInfo"></div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from "@vue/composition-api";
import Vue from "vue";
// 绑定内联样式信息代码
interface StyleInfo {
  height: string;
  backgroundColor: string;
}

export default defineComponent({
  props: {
    height: {
      type: Number,
      default: 16,
    },
    backgroundColor: {
      type: String,
      default: "#f3f5f7",
    },
  },
  setup(props) {
    const styleInfo: Ref<StyleInfo> = ref({
      height: props.height + "px",
      backgroundColor: props.backgroundColor,
    });
    return {
      styleInfo,
    };
  },
});
</script>
<style lang="stylus" scoped>
$border-color = rgba(7, 17, 27, 0.1);
$dpr = 2;

.gap-base {
  box-sizing: border-box;
  position: relative; // 相对定位

  &::before {
    content: '';
    position: absolute; // 绝对定位
    height: 1px;
    width: 100%;
    background-color: $border-color;
    top: 0;
    left: 0;
  }

  &::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: $border-color;
    bottom: 0;
    left: 0;
  }

  @media (-webkit-device-pixel-ratio: $dpr), (-webkit-max-device-pixel-ratio: $dpr), (-webkit-min-pixel-ratio: $dpr) {
    &::before, &::after {
      transform: scaleY(0.5);
    }
  }
}
</style>
